<template>
  <div>
    <div style="margin-left: 10px; padding-top: 15px">
      <el-date-picker
        v-model="timeData"
        format="yyyy-MM-dd"
        placeholder="选择日期"
        type="date"
        value-format="yyyy-MM-dd"
        @change="timeDataChange"
      />

      <el-button
        style="margin-left: 10px"
        type="primary"
        @click="init(timeData)"
      >
        搜索
      </el-button>
    </div>
    <div class="ml" style="margin-top: 30px">
      <el-table border :data="tableData" style="width: 100%">
        <el-table-column label="医生" prop="res_user_name" />
        <el-table-column label="用户/宝宝" prop="app_customer_name" />
        <el-table-column label="状态" prop="name">
          <template slot-scope="scoped">
            <div v-for="(items, index) in tableData" :key="index">
              <div v-if="items.res_user_id == scoped.row.res_user_id">
                <div v-for="(item, k) in scoped.row.item" :key="k">
                  <el-button
                    v-if="item.res_item_status == '' && item.radio"
                    v-permissions="{ permission: ['start:Reception'] }"
                    type="primary"
                    @click="submit(item)"
                  >
                    开始接诊
                  </el-button>
                  <el-button
                    v-if="
                      item.res_item_status == 'res_visiting' && item.radio != ''
                    "
                    type="danger"
                    @click="submitdel(item)"
                  >
                    结束接诊
                  </el-button>
                </div>
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="时长" prop="interval_time">
          <template slot-scope="scoped">
            <div>
              {{ scoped.row.interval_time }}
            </div>
          </template>
        </el-table-column>
        <el-table-column label="接诊列表" prop="name">
          <template slot-scope="scoped">
            <div v-for="(items, index) in tableData" :key="index">
              <div v-if="items.res_user_id == scoped.row.res_user_id">
                <div v-for="(item, k) in scoped.row.item" :key="k">
                  <el-radio
                    v-if="scoped.row.radio == items.id"
                    v-model="item.radio"
                    :label="item.id"
                    @change="radioChange(item.id, scoped.row)"
                  >
                    {{ item.app_customer_name }} {{ item.res_time }}
                  </el-radio>
                  <!-- 已经接诊 -->
                  <el-radio
                    v-if="
                      scoped.row.radio != '' && scoped.row.radio != items.id
                    "
                    v-model="item.radio"
                    disabled
                    :label="item.id"
                    @change="radioChange(item.id, scoped.row)"
                  >
                    {{ item.app_customer_name }} {{ item.res_time }}
                  </el-radio>
                  <!-- 选择接诊 -->
                  <el-radio
                    v-if="scoped.row.radio == ''"
                    v-model="item.radio"
                    :label="item.id"
                    @change="radioChange(item.id, scoped.row)"
                  >
                    {{ item.app_customer_name }} {{ item.res_time }}
                  </el-radio>
                </div>
              </div>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
  import { receptionList, receiveEnd, receiveBegin } from '@/api/reservation'
  //
  export default {
    name: 'Reception',
    data() {
      return {
        tableData: [],
        options: [],
        value: '',
        weekindex: 0,
        departmentList: [],
        departmentLs: '',
        timeData: '',
        radio: '',
        disabled: true,
        id: '',
        app_customer_name: '',
      }
    },
    computed: {},
    watch: {},
    created() {},
    mounted() {
      this.init()
    },
    methods: {
      // 初始化
      init(e) {
        const data = {
          res_date: e,
        }
        receptionList(data).then((e) => {
          console.log(e)
          this.tableData = e.data
          e.data.forEach((i) => {
            i.radio = ''
            i.item.forEach((k) => {
              if (k.res_item_status == 'res_visiting') {
                i.radio = k.id
              } else {
                k.res_item_status = ''
              }
            })
          })
          for (let item of this.tableData) {
            item.i = item.interval_time
            if (item.res_item_status == 'res_visiting') {
              setInterval(() => {
                item.i++
                var hours = parseInt((item.i % (60 * 60 * 24)) / (60 * 60))
                var minutes = parseInt((item.i % (60 * 60)) / 60)
                var seconds = item.i % 60
                item.interval_time =
                  (hours < 10 ? '0' + hours : hours) +
                  ':' +
                  (minutes < 10 ? '0' + minutes : minutes) +
                  ':' +
                  (seconds < 10 ? '0' + seconds : seconds)
              }, 1000)
            }
          }
        })
      },

      radioChange(e, i) {
        console.log(e)
        console.log(i)
        this.tableData.forEach((j) => {
          if (j.res_user_id == i.res_user_id) {
            j.id = e
          }
        })

        this.disabled = false
      },
      submit(e) {
        if (e.id) {
          const data = {
            id: e.id,
          }
          receiveBegin(data).then(() => {
            this.init()
          })
        } else {
          const data = {
            id: e.radio,
          }
          receiveBegin(data).then(() => {
            this.init()
          })
        }
      },
      submitdel(e) {
        if (e.id) {
          const data = {
            id: e.id,
          }
          receiveEnd(data).then(() => {
            this.init()
          })
        } else {
          const data = {
            id: e.radio,
          }
          receiveEnd(data).then(() => {
            this.init()
          })
        }
      },
      // 选择日期获取
      timeDataChange() {},
      departmentchange() {},
      lastWeek() {
        this.weekindex--
        this.SchedulingList()
      },
      ThisWeek() {
        this.weekindex = 0
        this.SchedulingList()
      },
      nextWeek() {
        this.weekindex++
        this.SchedulingList()
      },
    },
  }
</script>

<style></style>
